<template>
    <div class="hello">

        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>数据统计</el-breadcrumb-item>
            <el-breadcrumb-item>体检统计</el-breadcrumb-item>
        </el-breadcrumb>

        <div class="parent_1">
            <div id="myChart3" :style="{width: '50%', height: '300px'}"></div>
            <div id="myChart2" :style="{width: '50%', height: '300px'}"></div>
        </div>

        <div class="myChart4" id="myChart4" :style="myChartStyle"></div>

        <div class="pic">
            <div class="img">图文问诊</div>
            <div class="tel">电话问诊</div>
        </div>

        <div id="myChart" :style="{width: '100%', height: '500px'}"></div>
    </div>
</template>

<script>
    // 局部引入 echarts
    import * as echarts from 'echarts'
    // 引入echarts
    //let echarts = require('echarts/lib/echarts')
    // 引入中国地图数据
    import '@/assets/plugins/china.js'
    export default {
        name: 'HelloWorld',
        data() {
            return {
                myChart4: {},
                myChartStyle: {width: "100%", height: "400px" }, //图表样式

                myChart: null,
                option: {
                    title: {
                        text: '各地区问诊情况',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: ['各地区问诊情况', 'iphone4', 'iphone5']
                    },
                    visualMap: {
                        min: 0,
                        max: 2500,
                        left: 'left',
                        top: 'bottom',
                        text: ['高', '低'], // 文本，默认为数值文本
                        calculable: true
                    },
                    toolbox: {
                        show: false,
                        orient: 'vertical',
                        left: 'right',
                        top: 'center',
                        feature: {
                            dataView: {
                                readOnly: false
                            },
                            restore: {},
                            saveAsImage: {}
                        }
                    },
                    series: [{
                        itemStyle: {
                            normal: {
                                color: function(params) {
                                    var colorList = [
                                        '#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B',
                                        '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
                                        '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'
                                    ];
                                    return colorList[params.dataIndex]
                                },

                            }
                        },
                        name: '各地区问诊情况',
                        type: 'map',
                        mapType: 'china',
                        roam: false,
                        label: {
                            normal: {
                                show: true
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        data: [{
                            name: '北京',
                            value: this.randomData()
                        },
                            {
                                name: '天津',
                                value: this.randomData()
                            },
                            {
                                name: '上海',
                                value: this.randomData()
                            },
                            {
                                name: '重庆',
                                value: this.randomData()
                            },
                            {
                                name: '河北',
                                value: this.randomData()
                            },
                            {
                                name: '河南',
                                value: this.randomData()
                            },
                            {
                                name: '云南',
                                value: this.randomData()
                            },
                            {
                                name: '辽宁',
                                value: this.randomData()
                            },
                            {
                                name: '黑龙江',
                                value: this.randomData()
                            },
                            {
                                name: '湖南',
                                value: this.randomData()
                            },
                            {
                                name: '安徽',
                                value: this.randomData()
                            },
                            {
                                name: '山东',
                                value: this.randomData()
                            },
                            {
                                name: '新疆',
                                value: this.randomData()
                            },
                            {
                                name: '江苏',
                                value: this.randomData()
                            },
                            {
                                name: '浙江',
                                value: this.randomData()
                            },
                            {
                                name: '江西',
                                value: this.randomData()
                            },
                            {
                                name: '湖北',
                                value: this.randomData()
                            },
                            {
                                name: '广西',
                                value: this.randomData()
                            },
                            {
                                name: '甘肃',
                                value: this.randomData()
                            },
                            {
                                name: '山西',
                                value: this.randomData()
                            },

                            {
                                name: '内蒙古',
                                value: this.randomData()
                            },
                            {
                                name: '陕西',
                                value: this.randomData()
                            },

                            {
                                name: '吉林',
                                value: this.randomData()
                            },
                            {
                                name: '福建',
                                value: this.randomData()
                            },
                            {
                                name: '贵州',
                                value: this.randomData()
                            },
                            {
                                name: '广东',
                                value: this.randomData()
                            },
                            {
                                name: '青海',
                                value: this.randomData()
                            },
                            {
                                name: '西藏',
                                value: this.randomData()
                            },
                            {
                                name: '四川',
                                value: this.randomData()
                            },
                            {
                                name: '宁夏',
                                value: this.randomData()
                            },
                            {
                                name: '海南',
                                value: this.randomData()
                            },
                            {
                                name: '台湾',
                                value: this.randomData()
                            },
                            {
                                name: '香港',
                                value: this.randomData()
                            },
                            {
                                name: '澳门',
                                value: this.randomData()
                            }
                        ]
                    }]
                },
                myChart2: null,
                option2: {
                    title: {
                        text: '图文问诊',
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: ['皮肤科', '妇产科', '男科', '儿科', '中医科', '内科', '外科', '眼科', '口腔科', '骨科', '传染科', '体检科']
                    },
                    series: [{
                        name: '销量分布',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        data: [{
                            value: 168,
                            name: '皮肤科'
                        },
                            {
                                value: 126,
                                name: '妇产科'
                            },
                            {
                                value: 114,
                                name: '男科'
                            },
                            {
                                value: 117,
                                name: '儿科'
                            },
                            {
                                value: 75,
                                name: '中医科'
                            },
                            {
                                value: 225,
                                name: '内科'
                            },
                            {
                                value: 174,
                                name: '外科'
                            },
                            {
                                value: 210,
                                name: '眼科'
                            },
                            {
                                value: 237,
                                name: '口腔科'
                            },
                            {
                                value: 186,
                                name: '骨科'
                            },
                            {
                                value: 54,
                                name: '传染科'
                            },
                            {
                                value: 90,
                                name: '体检科'
                            },
                        ],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }],
                },
                myChart3: null,
                option3: {
                    title: {
                        text: '电话问诊',
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: ['皮肤科', '妇产科', '男科', '儿科', '中医科', '内科', '外科', '眼科', '口腔科', '骨科', '传染科', '体检科']
                    },
                    series: [{
                        name: '销量分布',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        data: [{
                            value: 56,
                            name: '皮肤科'
                        },
                            {
                                value: 42,
                                name: '妇产科'
                            },
                            {
                                value: 38,
                                name: '男科'
                            },
                            {
                                value: 39,
                                name: '儿科'
                            },
                            {
                                value: 25,
                                name: '中医科'
                            },
                            {
                                value: 75,
                                name: '内科'
                            },
                            {
                                value: 58,
                                name: '外科'
                            },
                            {
                                value: 59,
                                name: '眼科'
                            },
                            {
                                value: 70,
                                name: '口腔科'
                            },
                            {
                                value: 79,
                                name: '骨科'
                            },
                            {
                                value: 63,
                                name: '传染科'
                            },
                            {
                                value: 30,
                                name: '体检科'
                            },
                        ],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }],
                },
            }

        },
        watch: {
            // 监听 option 更新
            option: {
                // 更新处理，也可以 handler(newVal，oldVal)
                handler(newVal) {
                    if (newVal) {
                        this.myChart.setOption(newVal)
                    }
                },
                //关键,对象内部属性的监听(内部有数据更新，也进行对应的watch触发)
                deep: true
            },
        },

        mounted() {
            this.drawBar();
            this.drawBar2();
            this.drawBar3();
            this.initEcharts();
        },
        methods: {
            drawBar() {
                // 基于准备好的dom，初始化echarts实例
                // 全局使用 echarts
                // this.myChart = this.$echarts.init(document.getElementById('myChart'))
                // 调用局部的 echarts
                this.myChart = echarts.init(document.getElementById('myChart'))
                // 绘制图表
                this.myChart.setOption(this.option);

                // 设置该 chart 的 resize 方法
                window.addEventListener("resize", this.myChart.resize)
            },
            drawBar2() {
                // 调用局部的 echarts
                this.myChart2 = echarts.init(document.getElementById('myChart2'))
                // 绘制图表
                this.myChart2.setOption(this.option2);

                // 设置该 chart 的 resize 方法
                window.addEventListener("resize", this.myChart2.resize)
            },
            drawBar3() {
                // 调用局部的 echarts
                this.myChart3 = echarts.init(document.getElementById('myChart3'))
                // 绘制图表
                this.myChart3.setOption(this.option3);

                // 设置该 chart 的 resize 方法
                window.addEventListener("resize", this.myChart3.resize)
            },

            randomData() {
                return Math.round(Math.random() * 1000);
            },
            initEcharts() {
                // 样式设置
                // const option = {
                //   xAxis: {
                //     data: ["A", "B", "C", "D", "E"]
                //   },
                //   yAxis: {},
                //   series: [
                //     {
                //       type: "bar",
                //       data: [
                //         10,
                //         22,
                //         28,
                //         {
                //           value: 43,
                //           // 设置单个柱子的样式
                //           itemStyle: {
                //             color: "#91cc75",
                //             shadowColor: "#91cc75",
                //             borderType: "dashed",
                //             opacity: 0.5
                //           }
                //         },
                //         49
                //       ],
                //       barWidth: "20%", // 每个柱条的宽度就是类目宽度的 20%
                //       // 同系列柱条样式
                //       itemStyle: {
                //         barBorderRadius: 5,
                //         borderWidth: 1,
                //         borderType: "solid",
                //         borderColor: "#73c0de",
                //         shadowColor: "#5470c6",
                //         shadowBlur: 3
                //       }
                //     }
                //   ]
                // };
                // 柱条间距
                const option = {
                    title: {
                        text: '各疾病的收入',
                        left: 'center'
                    },
                    xAxis: {
                        data: ["白癜风", "皮肤瘙痒", "湿疹", "荨麻疹", "色素植", "心血管", "高血压"]
                    },
                    yAxis: {
                        type: 'value',
                        name: '单位（万元）',
                        axisLabel: {
                            formatter: '{value}'
                        }
                    },
                    series: [
                        {
                            type: "bar",
                            data: [23, 24, 18, 25, 18, 43, 60],
                            barGap: "0%", // 两个柱子之间的距离相对于柱条宽度的百分比;
                            barCategoryGap: "40%" // 每侧空余的距离相对于柱条宽度的百分比
                        },
                        {
                            type: "bar",
                            data: [12, 14, 9, 9, 11, 30, 28]
                        }
                    ]
                };
                this.myChart4 = echarts.init(document.getElementById("myChart4"));
                this.myChart4.setOption(option);
                //随着屏幕大小调节图表
                window.addEventListener("resize", this.myChart4.resize)
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    #myChart2 {
        float: left;
    }
    #myChart3 {
        float: right;
    }
    .parent_1 {
        overflow: hidden;
    }
    .pic {
        margin: auto;
        background-color: red;
        width: 100px;
        height: 50px;
        margin-top: -25px;
    }
    .pic .img {
        background-color: rgb(84, 112, 198);
        width: 50px;
        height: 100%;
        display: inline-block;
    }
    .pic .tel {
        background-color: rgb(145, 204, 117);
        width: 50px;
        height: 100%;
        display: inline-block;
    }
</style>